<template>
	<view class="list-item">
		<view class="list-item-left">
			<view class="one">{{ item.taskName }}</view>
			<view v-if="item.taskType == 'timeLimit'" class="two">有效期：{{ item.taskPeriodBegin }} 到 {{ item.taskPeriodEnd }}</view>
			<view v-if="item.taskType == 'everyday'" class="two">可完成：{{ item.maxFinishCount }}次</view>

			<view :key="index" v-for="(items, index) in item.taskConditionVoList" class="two">
				{{ item.taskType == 'growUp' ? '累计' : '' }}{{ items.conditionType == 'invite' ? '邀请好友' : items.conditionType == 'video' ? '观看视频' : '签到' }}：{{
					item.finishCount == item.maxFinishCount
						? items.conditionRequireNum
						: item.taskType == 'everyday'
						? item[items.conditionType] - item.finishCount * items.conditionRequireNum || 0
						: item[items.conditionType] || 0
				}}{{ items.conditionRequireNum ? '/' + items.conditionRequireNum : '' }}次
			</view>
			<view v-if="item.taskType == 'everyday'" class="two">已完成：{{ item.finishCount }}次</view>
			<view class="three">任务奖励：{{ item.taskAwardDescription }}</view>
		</view>
		<view class="list-item-right">
			<!-- <view class="list-item-right-tip">已完成：{{ item.finishCount }}</view> -->
			<view v-if="item.taskType !== 'everyday' && item.finishCount >= 1" class="list-item-right-button gray">已完成</view>
			<view v-else-if="item.taskType == 'everyday' && item.finishCount >= item.maxFinishCount" class="list-item-right-button gray">明日再来</view>
			<view v-else-if="item.canAward" @click="getAward(item)" class="list-item-right-button">领取奖励</view>
			<view v-else class="list-item-right-button">
				<view @click="hanldeTaskClick(true)">做任务</view>
				<tui-bubble-popup
					:show="item.show"
					:mask="true"
					position="absolute"
					direction="bottom"
					@close="hanldeTaskClick(false)"
					width="200rpx"
					left="-28rpx"
					top="-20rpx"
					translateY="-100%"
					triangleRight="100rpx"
					triangleBottom="-22rpx"
				>
					<view @click="handleTaskItem(items.conditionType)" :key="indexs" v-for="(items, indexs) in item.taskConditionVoList" class="tui-menu-item">
						{{ items.conditionType == 'invite' ? '邀请好友' : items.conditionType == 'video' ? '观看视频' : '签到' }}
					</view>
				</tui-bubble-popup>
			</view>
		</view>
		<tui-modal :show="signModal" @click="handleSign" @cancel="signModal = false" title="提示" content="观看完视频即可完成签到"></tui-modal>
	</view>
</template>

<script>
import {
	getUserBehaviorRecord,
	addVideoBehavior,
	receiveAward,
	signIn,
	getGrowUpTaskListPage,
	getEveryDayTaskListPage,
	getTimeLimitTaskListPage,
	getUserSignRecord
} from '@/service/task.js';
export default {
	props: {
		item: {
			type: Object,
			default: () => {
				return {
					taskDescription: '累积邀请10位好友',
					taskName: '邀请10位好友',
					taskPeriodBegin: null,
					taskPeriodEnd: null,
					taskState: 'y',
					taskTimeLimit: null,
					taskType: 'growUp',
					behaviorRecordVos: [],
					createdTime: '2020-12-07 18:36:36',
					finishCount: 0,
					id: '1335895979209191426',
					maxFinishCount: null,
					taskAwardDescription: '0.5元余额',
					taskConditionVoList: []
				};
			}
		}
	},
	data() {
		return { signModal: false ,
		noClick:true};
	},
	methods: {
		async getAward({ id }) {
			await receiveAward({ taskId: id }, { loading: true });
			this.$emit('receive', this.item);
		},
		handleTaskItem(type) {
			if (type === 'invite') {
				uni.navigateTo({
					url: '/pages/mine/invite/invite'
				});
			} else if (type == 'video') {
				console.log('观看视频');
				this.loadRewardVideo();
			} else {
				console.log('签到');
				this.signModal = true;
			}

			this.item.show = false;
		},
		handleSign({ index }) {
			this.signModal = false;
			if (index == 0) {
				return;
			}
			this.$loadRewardVideoAd(this.onSignIn);
		},
		loadRewardVideo() {
			if (this.loading) {
				return;
			}
			this.loading = true;
			setTimeout(v => {
				this.loading = false;
			}, 2000);
			this.$loadRewardVideoAd(false, () => {
				this.$emit('receive');
			});
		},
		async onSignIn() {
			uni.showLoading();
			try {
				await signIn({}, { loading: true });
				this.$msg('签到成功');
				this.$emit('signin');
			} finally {
				uni.hideLoading();
				//TODO handle the exception
			}
		},
		hanldeTaskClick(flag) {
			if (!this.item.taskConditionVoList || !this.item.taskConditionVoList.length) return;
			if (this.item.taskConditionVoList.length > 1) {
				this.item.show = flag;
			} else {
				const type = this.item.taskConditionVoList[0].conditionType;
				this.handleTaskItem(type);
			}
			this.$forceUpdate();
		}
	}
};
</script>

<style scoped lang="scss">
.list-item {
	width: 660upx;
	margin: 0 auto;
	background: #fff;
	border-radius: 40upx;
	padding: 20upx 0 20upx 30upx;
	display: flex;
	&-left {
		// width: 500upx;
		flex: 1;
		.one {
			font-size: 34upx;
			font-weight: 600;
			margin-bottom: 20upx;
			color: $uni-text-color;
		}

		.two,
		.three {
			// margin-top: 2upx;
			font-size: 28upx;
			color: $uni-text-color-grey;
		}
	}

	&-right {
		display: flex;
		align-items: center;
		width: 180upx;
		&-tip {
			margin-top: 16upx;
			font-size: 28upx;
			color: $uni-text-color-grey;
		}

		&-button {
			position: relative;
			margin-top: 20upx;
			border-radius: 44px;
			box-shadow: 0 10px 20px rgba(85, 85, 255, 0.1);
			background: #19b7ff;
			color: #fff;
			font-size: 28upx;
			width: 156upx;
			text-align: center;
			line-height: 66upx;
			height: 66upx;
		}
	}
}
.tui-menu-item {
	width: 100%;
	padding: 16rpx 10rpx;
	box-sizing: border-box;
}
.gray {
	background: #aaaaaa !important;
}
</style>
